<template>
	<view class="indexbox">

		<u-skeleton :loading="show" rows="20" title :animate="true">
			<exDrawer ref='drawer' width="200" :windowWidth="windowWidth">
				<view class="drawer" slot="drawerContent">
					<view class="drawer_list">
						<view class="drawer_list_item" v-for="(item,index) in drawerList"
							:class="{active:activeIndex ===item.id}" @click="itemClick(item.id)" :key="index">
							{{item.equipmentName}}
						</view>
					</view>
				</view>
				<view class="container" slot="containerContent">
					<!-- 头部栏 -->
					<view class="container_headbox">
						<view class="container_headbox_head">
							<view class="container_headbox_head_name">当前显示为:{{systemList[useWeb.type-1]}}</view>
							<view class="container_headbox_head_date">{{nowDate}}</view>
						</view>
					</view>
					<!-- 下部列表 -->
					<view class="container_bottomList">
						<view v-for="(item,index) in useWeb.allResObj" :key="index">
							<sequenceRackItem :itemObj="item" />
						</view>
					</view>
				</view>
			</exDrawer>
		</u-skeleton>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script setup>
	
	import {
		useWebsocket
	} from "@/store/websocket.js";
	let {
		proxy
	} = getCurrentInstance();
	const useWeb = useWebsocket()
	import {
		onMounted,
		destroyed,
		nextTick,
		ref,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onShow,
		onUnload
	} from "@dcloudio/uni-app";
	import exDrawer from '@/components/ex-drawer/ex-drawer.vue'
	import sequenceRackItem from '@/components/sequenceRackItem/sequenceRackItem.vue'
	let windowWidth = ref('0')
	let activeIndex = ref(1)
	const show = ref(true)

	let systemList = ref(['焙一A系统', '焙一B系统', '焙二A系统', '焙二B系统'])
	let drawerList = ref([{
			id: 1,
			equipmentName: '焙一A系统'
		},
		{
			id: 2,
			equipmentName: '焙一B系统'
		},
		{
			id: 3,
			equipmentName: '焙二A系统'
		},
		{
			id: 4,
			equipmentName: '焙二B系统'
		}
	])
	let nowDate = ref('')
	let setTime = ref('')
	const setDate = () => {
		setTime.value = setInterval(() => {
			let date = new Date()
			let year = date.getFullYear()
			let month = date.getMonth() + 1
			month >= 9 ? month : month = '0' + month
			let day = date.getDate()
			day >= 9 ? day : day = '0' + day
			let hour = date.getHours()
			hour >= 9 ? hour : hour = '0' + hour
			let minute = date.getMinutes()
			minute >= 9 ? minute : minute = '0' + minute
			let second = date.getSeconds()
			second >= 9 ? second : second = '0' + second
			nowDate.value = year + '-' + month + '-' + day + "  " + hour + ":" + minute + ":" + second
		}, 1000)
	}

	// 抽屉
	const itemClick = (id) => {
		activeIndex.value = id
		
		
		let opts = {
			url: proxy.$api.setGroup,
			method: "post",
		};
		let data = {
			item: id
		};
		show.value = false
		
		proxy.$request.httpTokenRequest(opts, data).then((res) => {
			if (res.data.code === 200) {
				proxy.$refs.uToast.show({
					type: 'success',
					message: '正在切换数据!'
				})
				uni.$u.sleep(2000).then(() => {
					show.value = false
				})
				
			}else{
				proxy.$refs.uToast.show({
					type: 'error',
					message: res.data.message
				})
			}
		}).catch((err) => {
			proxy.$refs.uToast.show({
				type: 'error',
				message: err.message
			})
		})
		
		useWeb.setType(id)
	}
	onLoad(() => {
		uni.getSystemInfo({
			success: function(res) {
				windowWidth.value = res.windowWidth.toString()

			}
		})
	})
	onShow(() => {

		nextTick(() => {
			uni.$u.sleep(2000).then(() => {
				show.value = false
			})

			setDate()
		})
	})
</script>
<style>
	page {
		background-color: #F2F2F2;
	}
</style>
<style lang="scss" scoped>
	.indexbox {
		.drawer {
			height: 100vh;

			&_btn {
				padding: 20rpx;
				box-sizing: border-box;
			}

			&_list {
				margin-top: 20rpx;
				padding: 10rpx;
				box-sizing: border-box;
				width: 100%;

				&_item {
					padding: 8rpx;
					box-sizing: border-box;
					background-color: #FFFFFF;
					border-left: 5rpx solid #2F79FD;
					margin-bottom: 5rpx;
				}

				.active {
					background-color: #2F79FD;
					color: #fff;
				}
			}

		}

		.container {

			width: 100vw;
			height: 100%;

			&_headbox {
				width: 100%;
				padding: 32rpx 18rpx 24rpx 18rpx;
				box-sizing: border-box;



				&_head {
					background: url('../../static/index/head.png');
					background-repeat: no-repeat;
					background-size: contain;
					height: 180rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					text-align: center;

					&_name {
						font-size: 34rpx;
						color: #FFF;
						margin-bottom: 16rpx;
					}

					&_date {
						font-size: 34rpx;
						color: #FFF;
					}
				}
			}

			&_bottomList {
				width: 100%;
				padding: 0 16rpx;
				box-sizing: border-box;
			}


		}
	}
</style>